<template>
	<div class="wrapper">
		<!-- header部分 -->
		<header>
			<p>商家信息</p>
		</header>
		<!-- 商家logo部分 -->
		<div class="business-logo">
			<img :src="business.businessImg">
		</div>
		<!-- 商家信息部分 -->
		<div class="business-info">
			<h1>{{ business.businessName }}</h1>
			<p>&#165;{{ business.starPrice }}起送 &#165;{{ business.deliveryPrice }}配送</p>
			<p>{{ business.businessExplain }}</p>
		</div>
		<!-- 食品列表部分 -->
		<ul class="food">
			<li v-for="(food, index) in foods" :key="food.foodId">
				<div class="food-left">
					<img :src="food.foodImg">
					<div class="food-left-info">
						<h3>{{ food.foodName }}</h3>
						<p>{{ food.foodExplain }}</p>
						<p>&#165;{{ food.foodPrice }}</p>
					</div>
				</div>
				<div class="food-right">
					<div>
						<i class="fa fa-minus-circle" @click="remove(index)"></i>
					</div>
					<p><span v-show="food.quantity > 0">{{ food.quantity }}</span></p>
					<div>
						<i class="fa fa-plus-circle" @click="add(index)"></i>
					</div>
				</div>
			</li>

		</ul>
		<!-- 购物车部分 -->
		<div class="cart">
			<div class="cart-left">
				<div class="cart-left-icon">
					<i class="fa fa-shopping-cart"></i>
					<div class="cart-left-icon-quantity">{{ totalQuantity }}</div>
				</div>
				<div class="cart-left-info">
					<p>&#165;{{ totalPrice }}</p>
					<p>另需配送费{{ business.deliveryPrice }}元</p>
				</div>
			</div>
			<div class="cart-right">
				<!-- 不够起送费 -->

				<div v-show="business.starPrice > totalPrice" class="cart-right-item">
					&#165;{{ business.starPrice }}起送
				</div>

				<!-- 达到起送费 -->
				<div v-show="business.starPrice <= totalPrice" class="cart-right-item" @click="jumpToOrderSure">
					去结算
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'BusinessInfo',
	data: function () {
		return {
			businessId: this.$route.query.businessId,
			foods: [],
			business: {},
			cartList: []
		}
	},
	created: function () {
		// console.log(this.businessId);
		this.getBusinessById(this.businessId);
		this.listFoodByBusinessId(this.businessId);


	},
	methods: {
		jumpToOrderSure: function () {
			this.$router.push({
				path: '/orders',
				query: {
					businessId: this.businessId
				}
			});
		},

		// 加载购物车数据
		listCart: function () {
			let that = this;
			let user = this.$sessionGet();
			// console.log(user);
			if (user != null) {
				let url = 'CartController/listCart';
				this.$axios.get(url + '?businessId=' + that.businessId + '&userId=' + user.userId)
					.then(resp => {
						that.cartList = resp.data;
						// that.foods.map(f=>{
						// 	that.cartList.map(c=>{
						// 		if(f.foodId == c.foodId)
						// 			f.quantity = c.quantity;
						// 	})
						// })
						for (let c of that.cartList) {
							for (let k of that.foods) {
								if (k.foodId == c.foodId) {
									k.quantity = c.quantity;
								}
							}
						}
						// 调用数组的变异方法
						that.foods.sort();
						// console.log(that.foods);
					})
					.catch(err => {
						console.log(err);
					})
			}
		},

		// 购物车数量增加
		add: function (index) {
			let user = this.$sessionGet();
			if (user == null) {		// 用户未登录，跳转到登录页面
				this.$router.push('/login');
				return;
			}
			// 用户已登录，带上userId向后端发起购物车数量增减请求
			if (this.foods[index].quantity == 0) {
				// 正常增加数据
				let cart = {
					businessId: this.business.businessId,
					foodId: this.foods[index].foodId,
					userId: user.userId,
					quantity: 1
				};
				let that = this;
				let url = 'CartController/saveCart';
				this.$axios.post(url, this.$qs.stringify(cart))
					.then(resp => {
						// 后端插入数据的行数
						let result = resp.data;
						if (result > 0) {
							that.foods[index].quantity = 1;
							// 调用数组变异方法驱动视图更新
							that.foods.sort();
						}
					})
					.catch(err => {
						console.log(err);
					})

			} else {
				// 修改数据
				// console.log("修改数据");
				// 调用修改数据方法
				this.update(index, 1);
			}

			// let url = '';
			// this.$axios.
		},

		// 购物车数量减少
		remove: function (index) {
			let user = this.$sessionGet();
			if (user == null) {		// 用户未登录，跳转到登录页面
				this.$router.push('/login');
			} else {				// 用户已登录，带上userId向后端发起购物车数量增减请求
				if (this.foods[index].quantity == 0) {
					return;
				}
				if (this.foods[index].quantity == 1) {
					// 删除后端的该商品数据

					let cart = {
						businessId: this.business.businessId,
						foodId: this.foods[index].foodId,
						userId: user.userId,
						quantity: 1
					};

					let that = this;
					let url = 'CartController/removeCart';
					this.$axios.post(url, this.$qs.stringify(cart))
						.then(resp => {
							// 后端修改数据的行数
							let result = resp.data;
							// 返回受影响的行数
							if (result > 0) {
								that.foods[index].quantity = 0;
								// 调用数组变异方法驱动视图更新
								that.foods.sort();
							}
						})
						.catch(err => {
							console.log(err);
						})
				} else {
					// 更新quantity
					// console.log("修改数据");
					// 调用修改数据方法
					this.update(index, -1);
				}
			}
		},

		// 修改购物车数量
		update: function (index, num) {

			let quantity = this.foods[index].quantity;
			let user = this.$sessionGet();
			let cart = {
				businessId: this.business.businessId,
				foodId: this.foods[index].foodId,
				userId: user.userId,
				quantity: quantity += num
			};
			let that = this;
			let url = 'CartController/updateCart';
			this.$axios.post(url, this.$qs.stringify(cart))
				.then(resp => {
					// 后端修改数据的行数
					let result = resp.data;
					// 返回受影响的行数
					if (result > 0) {
						that.foods[index].quantity = quantity;
						// 调用数组变异方法驱动视图更新
						that.foods.sort();
					}
				})
				.catch(err => {
					console.log(err);
				})
		},

		// 带上商家ID向后端获取商家信息
		getBusinessById: function (businessId) {
			let that = this;
			let url = 'BusinessController/getBusinessById';
			this.$axios.get(url + '?businessId=' + businessId)
				.then(resp => {
					that.business = resp.data;
				})
				.catch(err => {
					console.log(err);
				})
		},

		// 带上商家ID向后端获取食品列表
		listFoodByBusinessId: function (businessId) {
			let that = this;
			let url = 'FoodController/listFoodByBusinessId';
			this.$axios.get(url + '?businessId=' + businessId)
				.then(resp => {
					that.foods = resp.data;
					that.foods.map(v => v.quantity = 0);
					// console.log(that.foods);
					// 先取食品列表，再在已登录的情况下取购物车
					let user = that.$sessionGet();
					if (user != null) {
						that.listCart();
					}
				})
				.catch(err => {
					console.log(err);
				})
		}
	},
	// vue中的函数: methods(业务函数)、计算属性、过滤器、监听器、生命周期
	computed: {
		// 计算购物车中商品总数量
		totalQuantity: function () {
			let result = 0;
			for (let f of this.foods) {
				result += f.quantity;
			}
			return result;
		},
		// 计算购物车中商品总价格
		totalPrice: function () {
			let result = 0;
			for (let f of this.foods) {
				result += f.foodPrice * f.quantity;
			}
			return result;
		}
	}
}
</script>

<style scoped="scoped">
/****************** 总容器 ******************/
.wrapper {
	width: 100%;
	height: 100%;
}

/****************** header部分 ******************/
.wrapper header {
	width: 100%;
	height: 12vw;
	background-color: #0097FF;
	color: #fff;
	font-size: 4.8vw;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;
	display: flex;
	justify-content: center;
	align-items: center;
}

/****************** 商家logo部分 ******************/
.wrapper .business-logo {
	width: 100%;
	height: 35vw;
	/*使用上外边距避开header部分*/
	margin-top: 12vw;
	display: flex;
	justify-content: center;
	align-items: center;
}

.wrapper .business-logo img {
	width: 40vw;
	height: 30vw;
	border-radius: 5px;
}

/****************** 商家信息部分 ******************/
.wrapper .business-info {
	width: 100%;
	height: 20vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.wrapper .business-info h1 {
	font-size: 5vw;
}

.wrapper .business-info p {
	font-size: 3vw;
	color: #666;
	margin-top: 1vw;
}

/****************** 食品列表部分 ******************/
.wrapper .food {
	width: 100%;
	/*使用下外边距避开footer部分*/
	margin-bottom: 14vw;
}

.wrapper .food li {
	width: 100%;
	box-sizing: border-box;
	padding: 2.5vw;
	user-select: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.wrapper .food li .food-left {
	display: flex;
	align-items: center;
}

.wrapper .food li .food-left img {
	width: 20vw;
	height: 20vw;
}

.wrapper .food li .food-left .food-left-info {
	margin-left: 3vw;
}

.wrapper .food li .food-left .food-left-info h3 {
	font-size: 3.8vw;
	color: #555;
}

.wrapper .food li .food-left .food-left-info p {
	font-size: 3vw;
	color: #888;
	margin-top: 2vw;
}

.wrapper .food li .food-right {
	width: 16vw;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.wrapper .food li .food-right .fa-minus-circle {
	font-size: 5.5vw;
	color: #999;
	cursor: pointer;
}

.wrapper .food li .food-right p {
	font-size: 3.6vw;
	color: #333;
}

.wrapper .food li .food-right .fa-plus-circle {
	font-size: 5.5vw;
	color: #0097EF;
	cursor: pointer;
}

/****************** 购物车部分 ******************/
.wrapper .cart {
	width: 100%;
	height: 14vw;
	position: fixed;
	left: 0;
	bottom: 0;
	display: flex;
}

.wrapper .cart .cart-left {
	flex: 2;
	background-color: #505051;
	display: flex;
}

.wrapper .cart .cart-left .cart-left-icon {
	width: 16vw;
	height: 16vw;
	box-sizing: border-box;
	border: solid 1.6vw #444;
	border-radius: 8vw;
	background-color: #3190E8;
	font-size: 7vw;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: -4vw;
	margin-left: 3vw;
	position: relative;
}

.wrapper .cart .cart-left .cart-left-icon-quantity {
	width: 5vw;
	height: 5vw;
	border-radius: 2.5vw;
	background-color: red;
	color: #fff;
	font-size: 3.6vw;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	right: -1.5vw;
	top: -1.5vw;
}

.wrapper .cart .cart-left .cart-left-info p:first-child {
	font-size: 4.5vw;
	color: #fff;
	margin-top: 1vw;
}

.wrapper .cart .cart-left .cart-left-info p:last-child {
	font-size: 2.8vw;
	color: #AAA;
}

.wrapper .cart .cart-right {
	flex: 1;
}

/*达到起送费时的样式*/
.wrapper .cart .cart-right .cart-right-item {
	width: 100%;
	height: 100%;
	background-color: #38CA73;
	color: #fff;
	font-size: 4.5vw;
	font-weight: 700;
	user-select: none;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
}

/*不够起送费时的样式（只有背景色和鼠标样式的区别）*/
/*
	.wrapper .cart .cart-right .cart-right-item{
	    width: 100%;
	    height: 100%;
	    background-color: #535356;
	    color: #fff;
	    font-size: 4.5vw;
	    font-weight: 700;
	    user-select: none;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	}
	*/
</style>
